<template>
  <div class="share-component" v-clickOutside="closeShare">
    <div class="share-container" v-if="show && url">
      <ul>
        <li class="copy-url" :data-clipboard-text="url" @click="onCopyUrl">复制链接</li>
        <li class="weibo" @click="onShareToWeibo">新浪微博</li>
        <li class="QQ" @click="onShareToQQ">QQ好友</li>
        <li class="wechat" :data-clipboard-text="url" @click="onShareToWechat">微信扫一扫</li>
      </ul>
      <div class="qrcode"><qrcode-vue :value="url" :size="140" level="H"></qrcode-vue></div>
    </div>
  </div>
</template>

<style scoped>
  .share-component {
    -webkit-transform: translateX(-50%);
       -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  .share-container {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    position: relative;
    width: 230px;
    padding: 15px 40px;
  }
  .share-container::before {
    content: '';
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    background: #fff;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    top: -18px;
    left: 50%;
    border-top-right-radius: 4px;
    -webkit-transform: rotate(-45deg) translateX(-50%);
       -moz-transform: rotate(-45deg) translateX(-50%);
        -ms-transform: rotate(-45deg) translateX(-50%);
         -o-transform: rotate(-45deg) translateX(-50%);
            transform: rotate(-45deg) translateX(-50%);
  }
  li {
    padding: 10px 0 10px 50px;
    font-size: 18px;
    color: #000;
    background-position: left center;
    background-repeat: no-repeat;
    cursor: pointer;
  }
  li.copy-url {
    background-image: url(./imgs/copy-url.png);
  }
  li.weibo {
    background-image: url(./imgs/weibo.png);
  }
  li.QQ {
    background-image: url(./imgs/qq.png);
  }
  li.wechat {
    background-image: url(./imgs/wechat.png);
  }
  .qrcode {
    margin-top: 15px;
  }
</style>

<script>
import urlHelper from '@/lib/url_helper';
import QrcodeVue from 'qrcode.vue';
import Clipboard from 'clipboard';

export default {
  components: { QrcodeVue },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    }
  },
  directives: {
    clickOutside: {
      bind (el, binding, vnode) {
        function documentHandler (e) {
          if (el.contains(e.target)) {
            return false;
          }
          if (binding.expression) {
            binding.value(e);
          }
        }
        el.__vueClickOutside__ = documentHandler;
        document.addEventListener('click', documentHandler);
      },
      unbind (el, binding) {
        document.removeEventListener('click', el.__vueClickOutside__);
        delete el.__vueClickOutside__;
      }
    }
  },
  methods: {
    open (url) {
      window.open(url);
    },
    copy (selector) {
      var clipboard = new Clipboard(selector);
      clipboard.on('success', e => {
        clipboard.destroy();
      });
      clipboard.on('error', e => {
        this.$message.error('该浏览器不支持自动复制');
        clipboard.destroy();
      });
    },
    onCopyUrl () {
      this.copy('.copy-url');
      this.$emit('share', 'copy-url');
    },
    onShareToWeibo () {
      let args = {
        url: this.url,
        title: this.title,
        pic: '',
        appkey: ''
      };
      this.open(urlHelper.setUrlParams(args, 'http://service.weibo.com/share/share.php?'));
      this.$emit('share', 'weibo');
    },
    onShareToQQ () {
      let args = {
        url: this.url,
        desc: 'QQ分享',
        title: this.title,
        summary: '',
        pics: '',
        flash: '',
        site: 'QQ分享',
        style: '201',
        width: 32,
        height: 32
      };
      this.open(urlHelper.setUrlParams(args, 'http://connect.qq.com/widget/shareqq/index.html?'));
      this.$emit('share', 'qq');
    },
    onShareToWechat () {
      this.copy('.wechat');
      this.$emit('share', 'wechat');
    },
    closeShare () {
      this.$emit('close');
    }
  },
  created () {}
};
</script>

